<template>
	<div class='wrap'>
		<div class='selectModule'>
			<el-row :gutter="20">
				<el-col :span="12" :offset="6">
					<div class="grid-content bg-purple">
						<img class="headImg" src="../../assets/img/select/header.png" alt="">
					</div>
				</el-col>
			</el-row>
			<div class="title"></div>

			<el-row type="flex" class="row-bg" justify="center">
				<el-col :span="4">
					<div class="grid-content bg-purple">
						<el-button class='equiCognition' @click="jumpToLearn()"></el-button>
					</div>
				</el-col>
				<el-col :span="4">
					<div class="grid-content">
						<el-button class='modelSet' @click="jumpToHome()"></el-button>
					</div>
				</el-col>
				<el-col :span="4">
					<div class="grid-content bg-purple">
						<el-button class='guidao' @click="jumpToHomeGuidao()"></el-button>
					</div>
				</el-col>
				<el-col :span="4">
					<div class="grid-content">
						<el-button class='car' @click="jumpToHomeCar()"></el-button>
					</div>
				</el-col>
			</el-row>
			<el-dialog width="50%" title="" class='testDialog' :visible.sync="test">
				<el-carousel arrow="always" :autoplay=false :loop=false trigger="click" indicator-position="none">
					<el-carousel-item>
						<div style="padding:50px;font-size:20px">
							<div style="margin-bottom:20px">(1) 地铁能馈系统是利用列车( )产生的能量反馈给电网。</div>
							<el-radio v-model="radio" label="1">再生制动</el-radio>
							<el-radio v-model="radio" label="2">电阻制动</el-radio>
							<el-radio v-model="radio" label="3">机械制动</el-radio>
						</div>
					</el-carousel-item>
				</el-carousel>
			</el-dialog>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				test: false,
				radio: '3',
			}
		},

		methods: {
			jumpToLearn() {
				this.$router.push('/equiCognition');
			},
			jumpToHome() {
				this.$router.push('/home?id=0');
			},
			jumpToHomeGuidao() {
				this.$router.push('/home?id=1');
			},
			jumpToHomeCar() {
				this.$router.push('/home?id=2');
			}
		},
	};
</script>
<style scoped>
	.headImg {
		width: 100%;
		height: 60px
	}

	.title {
		background-image: url(../../assets/img/select/title.png);
		height: 58px;
		width: 256px;
		margin: 0 auto;
		margin-top: 30px;
		margin-bottom: 140px;
	}

	.wrap {
		height: 100%;
		width: 100%;
		background-color: rgb(3, 7, 31);
		background-image: url(../../assets/img/select/bg.png);
		color: #fff;
		overflow: hidden;
	}

	.selectModule {
		height: 100%;
		width: 100%;
		background-image: url(../../assets/img/show.png);
		background-size: 100% 100%;
		overflow: hidden;
	}

	/* .el-col{
		margin-top:250px
	} */
	.el-button.el-button--default.el-button--small {
		/* background-image: url(../../assets/img/select/button.png); */
		height: 180px;
		width: 135px;
		color: #F0F0F0;
		background-color: transparent;
		border: none;
		margin-left:15%
	}

	.equiCognition {
		background-image: url(../../assets/img/select/equiCognition.png);
		background-size: 100% 100%;
	}

	.equiCognition:hover {
		background-image: url(../../assets/img/select/equiHover.png);
		background-size: 100% 100%;
	}

	.modelSet {
		background-image: url(../../assets/img/select/modelSet.png);
		background-size: 100% 100%;
	}

	.modelSet:hover {
		background-image: url(../../assets/img/select/modelSetHover.png);
		background-size: 100% 100%;
	}

	.guidao {
		background-image: url(../../assets/img/select/guidao.png);
		background-size: 100% 100%;
	}

	.guidao:hover {
		background-image: url(../../assets/img/select/guidaoHover.png);
		background-size: 100% 100%;
	}

	.car {
		background-image: url(../../assets/img/select/car.png);
		background-size: 100% 100%;
	}

	.car:hover {
		background-image: url(../../assets/img/select/carHover.png);
		background-size: 100% 100%;
	}

	.shibie {
		background-image: url(../../assets/img/select/shibie.png);
		background-size: 100% 100%;
	}

	.shibie:hover {
		background-image: url(../../assets/img/select/shibieHover.png);
		background-size: 100% 100%;
	}
</style>
<style>
	/* 考试弹窗 */
	.testDialog .el-dialog {
		padding: 40px;
		background-image: url(../../assets/img/head/test.png);
		background-size: 100% 100%;
		background-color: transparent;
	}

	.testDialog .el-dialog .el-dialog__body div,
	.testDialog .el-dialog .el-dialog__body .el-radio {
		color: rgb(178, 235, 248)
	}

	/* 表格border样式 */
	.el-dialog .el-table--border,
	.el-table--group {
		border: 1px solid rgb(30, 101, 148);
	}

	.el-dialog .el-table td,
	.el-table th.is-leaf {
		border-bottom: 1px solid rgb(30, 101, 148)
	}

	.el-dialog .el-table--border td,
	.el-table--border th,
	.el-table__body-wrapper .el-table--border.is-scrolling-left~.el-t {
		border-right: 1px solid rgb(30, 101, 148)
	}

	.el-dialog .el-table--border th,
	.el-table__fixed-right-patch {
		border-right: 1px solid rgb(30, 101, 148)
	}

	.el-dialog .el-table--border th,
	.el-table__fixed-right-patch {
		border-bottom: 1px solid rgb(30, 101, 148)
	}

	.el-table--border::after,
	.el-table--group::after,
	.el-table::before {
		background-color: transparent;
	}

	/* 按钮 */
	.el-dialog .el-button.el-button--default.el-button--small,
	.el-dialog .el-button.el-button--primary.el-button--small {
		background-image: url(../../assets/img/button_blue.png);
		background-size: 100% 100%;
		border: none;
		color: rgb(178, 235, 248);

		animation: myfirst 5s;
		animation-iteration-count: infinite;
	}

	.el-dialog .el-button.el-button--default.el-button--small:hover,
	.el-dialog .el-button.el-button--primary.el-button--small:hover {
		/* background-image: url(../../assets/img/button_red.png); */
		background-size: 100% 100%;
		border: none;
		color: rgb(178, 235, 248);
	}

	.el-dialog__headerbtn i {
		color: rgb(93, 237, 231) !important;
		font-size: 20px !important
	}

	.el-dialog__headerbtn i:hover {
		color: rgb(9, 142, 255) !important;
	}
</style>
